Как сделать галерею изображений при помощи чистого CSS3

Здесь мы рассмотрим, как можно при помощи чистого CSS сделать фото галерею. Давайте рассмотрим новый CSS3 селектор :target pseudo-class, который может быть использован чтобы применить правила CSS к элементу с идентификатором фрагмента. Например, давайте представим что у нас есть секция, с заголовком <h3 id=”chapter_2”> :

<h3 id=”chapter_2”>Название секции</h3>

Мы можем создать прямую ссылку на этот элемент, используя идентификатор фрагмента в конце нашего URL:

http://www.example.com/index.html#chapter_2

И при помощи селектора :target назначить фоновый цвет этому элементу, чтобы ясно показать куда мы попали:

h3 :target { background-color: #ff0; }

Теперь, когда мы разобрались с принципом работы, давайте создадим простую галерею на три фотографии (вы можете сделать, сколько вашей душе угодно), которая будет переключаться при помощи списка из гиперссылок. Вот как на этом примере.



Итак, первое, что мы должны сделать, это создать список с картинкой, названием и ссылкой:

CODE:

<ol>
<li id="one">
<p>
<a href="#one">first piture</a>
</p>
<img src="one.jpg" width="500" height="333" alt="one" />
</li>
<li id="two">
<p>
<a href="#two">second picture</a>
</p>
<img src="two.jpg" width="500" height="333" alt="two" />
</li>
<li id="three">
<p>
<a href="#tree">third picture</a>
</p>
<img src="three.jpg" width="500" height="333" alt="three" />
</li>
</ol>

Каждый пункт списка нуждается в собственном идентификаторе. Все изображения позиционированы абсолютно один поверх другого и селектор просто меняет значение z-index так, чтобы он оказывался наверху.





CODE:

img {
    background-color: #FFFFFF;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 500px;
}
ol {
    margin-left: 650px;
}
li:target img {
    z-index: 100;
}

Вот так просто можно сделать фото галерею, не используя JavaScript или Flash.



Оригинал статьи на английском языке: www.css3.info/making-an-image-gallery-with-target

Комментарии ВКонтакте



arrow вернуться к странице статей про CSS3